<template>
    <div class="sofast-table">
        <div class="sofast-table-header">
            <div class="header-left"></div>
            <div class="header-right">
                <SearchFilter v-model="searchValue" :searchFields="searchFields" @change="searchChange" />
            </div>
        </div>
        <div class="sofast-table-body">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
        <div class="sofast-table-footer"></div>
    </div>
</template>

<script setup lang="ts">
import { PropType, ref } from "vue";
import SearchFilter from "@/components/sofastui/searchFilter/SearchFilter.vue"

defineProps({
    modelValue: {
        type: Object as PropType<{
            relation: "or" | "and";
            fields: { field: string; oper: string; value?: any }[];
        }>,
        default: () => {
            return {
                relation: "and",
                fields: [],
            };
        },
    },
    searchFields: {
        type: Array as PropType<
            {
                label: string;
                prop: string;
                type?: string;
                [key: string]: any;
            }[]
        >,
        default: () => {
            return [];
        },
    },
    importFields: {
        type: Array as PropType<
            {
                label: string;
                prop: string;
                type?: string;
                [key: string]: any;
            }[]
        >,
        default: () => {
            return [];
        },
    },
});

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const searchValue = ref<{
    relation: "or" | "and";
    fields: { field: string; oper: string; value?: any }[];
}>({ relation: "and", fields: [] })


const searchChange = (val: any) => {
    console.log('高级搜索')
    console.log(val)
}
</script>